! function(window, document, $) {
    let page = 1;
    let init = function() {
        initEvent();
        render(null, null, page);
        downRefresh();
    }

    let initEvent = function() {
        $("#searchBtn").on("tap", searchClick);
        $(".order-btn").on("tap", orderClick)
    }

    let render = function(keys, order, page) {
        let keyvalue = key()[0][1];
        let data = {
            proName: keys || keyvalue,
            page: page,
            pageSize: 4
        }
        Object.assign(data, order)
        $.ajax({
            type: "get",
            url: "/product/queryProduct",
            data: data,
            dataType: "json",
            success: function(response) {
                console.log(response)

                let key1 = keys || keyvalue;
                setTimeout(function() {
                    let temp = template("listTemp", response);
                    $("#product_box").append(temp);
                    $("input").val(key1);
                    mui("#refreshContainer").pullRefresh().endPulldownToRefresh();
                    if (!response.data.length) {
                        mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                        return false;
                    }
                }, 2000)
            }
        });
    }
    let searchClick = function() {
        let keyValue = $("input").val();
        render(keyValue);
        mui('.mui-scroll-wrapper').pullRefresh().pulldownLoading();
        $(".order-btn").removeClass("active")
    }

    let orderClick = function() {
        let $this = $(this);
        let orderType = $this.attr("data-order");
        let orderObj = {}
        if (!$this.hasClass("active")) {
            $this.addClass("active").siblings().removeClass("active").find(".mui-icon").addClass("mui-icon-arrowdown");
        } else {
            if ($this.find(".mui-icon-arrowdown").hasClass("mui-icon-arrowdown")) {
                $this.find(".mui-icon-arrowdown").removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowup")
            } else {
                $this.find(".mui-icon-arrowup").removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown")
            }
        }

        let order = $this.find(".mui-icon").hasClass("mui-icon-arrowdown") ? 1 : 2;
        orderObj[orderType] = order;
        let key = $("input").val()
        render(key, orderObj)
        mui('.mui-scroll-wrapper').pullRefresh().pulldownLoading();
    }
    let downRefresh = function() {
        mui.init({
            pullRefresh: {
                container: "#refreshContainer",
                down: {
                    auto: true,
                    callback: function() {
                        setTimeout(function() {
                            mui("#refreshContainer").pullRefresh().endPulldownToRefresh()
                        }, 2000)
                    }
                },
                up: {
                    auto: true,
                    contentnomore: '没有更多数据了',
                    callback: function() {
                        let that = this;
                        page++
                        render(null, null, page);
                        setTimeout(function() {
                            that.endPullupToRefresh(true);
                        }, 2000)
                    }
                }
            }
        });
    }





    init()
}(window, document, Zepto, undefined);